<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>找回密码</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>

<body>
    <!--说明： 分为三个大模块是按照步骤，最开始只显示找回账号DOM，点击下一步后切换到下一个容器，上一个不显示，依次类推 -->
    <div class="title">
        <span class="active"><i>1</i>输入找回账号</span>
        <span><i>2</i>回答密保问题</span>
        <span><i>3</i>重置密码</span>
    </div>
    <div class="box account">
        <div class="input-item">
            <label>请输入手机号：</label>
            <input type="text" id="phone">
        </div>
        <button id="one">下一步</button>
    </div>
    <!----------------------------------------------------->

    <!-- <div class="title" style="display: none;">
        <span><i>1</i>输入找回账号</span>
        <span class="active"><i>2</i>回答密保问题</span>
        <span><i>3</i>重置密码</span>
    </div> -->
    <div class="box problem" style="display: none;">
        <div class="input-item">
            <label> 用户名：</label>
            <input type="text" value="11" id="username">
        </div>
        <div class="input-item">
            <label> 手机号：</label>
            <input type="text" value="xxxx" id="iphon">
        </div>
        <div class="input-item">
            <label>密保问题：</label>
            <input type="text" value="xxxxxxx" id="question">
        </div>
        <div class="input-item">
            <label>密保答案：</label>
            <input type="text" id="answer">
        </div>
        <button id="two">上一步</button>
        <button id="three">下一步</button>
    </div>
    <!----------------------------------------------------->

    <!-- <div class="title">
        <span><i>1</i>输入找回账号</span>
        <span><i>2</i>回答密保问题</span>
        <span class="active"><i>3</i>重置密码</span>
    </div> -->
    <div class="box pwd" style="display: none;">
        <div class="input-item">
            <label>请输入新密码：</label>
            <input type="text" id="new_pwd">
        </div>
        <button id="four">上一步</button>
        <button id="reset">立即重置</button>
    </div>


    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.1.3/axios.js"></script>
    <script>
        axios.defaults.baseURL = 'http://124.223.14.236:3001/api';
        let id = null
        $('#one').on('click', async function() {
            const phone = $('#phone').val()
            if (!phone.length) {
                return alert('请输入')
            }
            const {
                data
            } = await axios({
                method: 'get',
                url: '/user/findPwd',
                params: {
                    phone
                }
            })
            console.log(data)
            if (!data.success) {
                return alert(data.msg)
            }
            //显示密保问题页面
            $('.account').hide()
            $('.problem').show()
            $('.title .active').removeClass('active')
            $('.title span').eq(1).addClass('active')

            //数据回显
            $('#username').attr('value', data.data.username)
            $('#iphon').attr('value', data.data.phone)
            $('#question').attr('value', data.data.question)
            id = String(data.data.id)

        })

        $('#two').on('click', function() {

            $('.title .active').removeClass('active')
            $('.title span').eq(0).addClass('active')
            $('.account').show()
            $('.problem').hide()
        })

        //回答密保问题
        let answer = null
        $('#three').on('click', async function() {
            answer = $('#answer').val()
            if (!answer.length) {
                return alert('请输入密保')
            }


            $('.problem').hide()
            $('.pwd').show()
            $('.title .active').removeClass('active')
            $('.title span').eq(2).addClass('active')
        })

        $('#reset').on('click', async function() {
            const newPassword = $('#new_pwd').val()
            const {
                data: {
                    data: res
                }
            } = await axios({
                method: 'post',
                url: '/user/resetPwd',
                data: {
                    id,
                    password: newPassword,
                    answer,
                }
            })
            if (!res.success) {
                return alert(res.mse)
            }
            alert(res.mse)
        })

        $('#four').on('click', function() {
            $('.problem').show()
            $('.pwd').hide()
            $('.title .active').removeClass('active')
            $('.title span').eq(1).addClass('active')
        })
    </script>
</body>

</html>